<template>
  <el-page-header @back="router.go(-1)" title="返回">
    <template #content>
      <span>{{foodForm.id ? '编辑':'添加'}}单元</span>
    </template>
  </el-page-header>

  <div class="content">
    <el-form ref="foodFormRef" :model="foodForm" :rules="foodFormRule" :inline="false" label-width="160px">

      <el-form-item label="单元号" prop="num">
        <el-input v-model="foodForm.num" placeholder="请输入单元号" maxlength="20"/>
      </el-form-item>

      <el-form-item label="书籍" prop="bookId">  
        <el-select style="width:200px" v-model="foodForm.bookId" :disabled="isBookIdReadOnly" placeholder="请选择书籍">  
          <el-option  
            v-for="(item, index) in bookList"  
            :key="index"  
            :label="`${item.categoryName} - ${item.bookName}`"  
            :value="item.id"  
          />  
        </el-select>  
      </el-form-item>  

      
      

      

      

      <el-form-item>
        <el-button @click="handleSave">保存</el-button>
        <el-button type="primary" @click="handleCancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref,computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { saveUnit ,findById} from "@/api/unit";
import { getBookList } from "@/api/book";
 


const router = useRouter();
const route = useRoute();

let bookList = reactive([]);

let foodFormRef = reactive(null);
let foodForm = reactive({
  id: null,
  num: null,
 bookId: null,
  
});
let foodFormRule = reactive({
  num: [
    { required: true, trigger: 'blur', message: '请输入单元号' }
  ],
 
  bookId: [
    { required: true, trigger: 'blur', message: '请选择书籍' }
  ]
});





// 加载版本信息
getBookList().then(resp => {
  bookList.push(...resp.data);
});

// 添加计算属性来判断 bookId 是否为空  
const isBookIdReadOnly = computed(() => !!foodForm.id);   
  
  //取消键
  const handleCancle = () => {  
  router.go(-1);  
};  

if (route.query.unitId) {
  // 根据id查找
  findById(route.query.unitId).then(resp => {
    let unit = resp.data;
    
    foodForm.id = unit.id;
    foodForm.bookId = unit.bookId;
    foodForm.num = unit.num;
    
  }).catch(error => {
    // 错误处理
  });
}




 
const handleSave = () => {
  // 判断是否校验通过
  if (foodFormRef && typeof foodFormRef.validate === 'function') {  
    foodFormRef.validate((valid) => {  
      if (valid) {  
        saveUnit(foodForm.id, foodForm).then((resp) => {  
          if (resp.code === 200) { // 假设后端成功响应码为 200  
            router.push({ path: '/unit/list' });  
            alert(resp.msg); // 显示成功消息  
          } else {  
            alert(resp.msg); // 显示错误信息  
          }  
        }).catch(error => {  
          console.error('请求失败:', error);  
          alert('请求失败，请稍后再试');  
        });  
      }  
    });  
  }  
};
</script>



            
<style scoped>
.content {
  margin-top: 40px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>